var OutOrder = function () {
  var template = /*html*/ `
    <div class="out-order" v-loading.fullscreen.lock="loading">
      <div class="colorDesc clearfix">
        <div>
          <div class="color out-time"></div>
          <span>代表已经拖期</span>
        </div>
      </div>
      <div class="out-order-info clearfix">
        <div>订单编号:{{orderInfo.showOrderId}}</div>
        <div v-if="orderInfo.factoryId!==''">工厂型号:{{orderInfo.factoryId}}</div>
        <div v-if="orderInfo.customerId!==''">客户型号:{{orderInfo.customerId}}</div>
        <div v-if="orderInfo.customerOrderId!==''">客户订单号:{{orderInfo.customerOrderId}}</div>
        <div v-if="orderInfo.customer!==''">客户:{{orderInfo.customer}}</div>
      </div>
      <div class="out-order-table">
        <el-table fit stripe border :data="orderList" style="width: 100%" :row-class-name="orderRowClassName" height="parent">
          <el-table-column :resizable="false" prop="supplierName" label="供应商" :auto-width="true" min-width="80px"></el-table-column>
          <el-table-column :resizable="false" prop="technology" label="加工工艺" :auto-width="true" min-width="80px"></el-table-column>
          <el-table-column :resizable="false" prop="flowCycle" label="流程周期" min-width="80px"></el-table-column>
          <el-table-column :resizable="false" prop="maching" label="加工对象" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="color" label="颜色" :auto-width="true" min-width="60px">
            <template slot-scope="props">
              <span v-if="props.row.hasEle">
                {{props.row.additionalColor}}({{props.row.additionalMaterialType}})
              </span>
              <span v-else>{{props.row.color}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="model" label="规格" :auto-width="true" min-width="60px"></el-table-column>
          <el-table-column :resizable="false" prop="count" label="外协数量" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="unitPrice" label="单价" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="计价数量" min-width="100px" align="center">
            <template slot-scope="props">
              <span>{{props.row.valuationCount}} {{props.row.valuationUint}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="totalPrice" label="合计" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="remark" label="备注" width="151px" show-overflow-tooltip>
          </el-table-column>
          <el-table-column :resizable="false" label="是否完成" min-width="80px" align="center">
            <template slot-scope="props">
              <span>{{props.row.isFinish===2?'未完成':'完成'}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="完成时间" width="90px" align="center">
            <template slot-scope="props">
              <span v-if="props.row.isFinish!==2&&props.row.returenTime!==''">{{moment(props.row.returenTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="returnCount" label="完成数量" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="returnValuationCount" label="完成计价数量" min-width="100px" align="center">
            <template slot-scope="props">
              <span>{{props.row.returnValuationCount}} {{props.row.valuationUint}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="状态" min-width="100px" align="center">
            <template slot-scope="props">
              <span>{{getStatus(props.row)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  `;

  return {
    props: {
      order: {
        type: Object,
        required: true
      }
    },
    data: function () {
      return {
        loading: false,
        orderInfo: this.getOrderInfo(),
        orderList: [],
        moment: moment
      };
    },
    created: function () {
      this.setOrderList();
    },
    methods: {
      getOrderInfo: function () {
        var order = this.order;
        var fields = ['showOrderId','factoryId','customerId','customerOrderId','customer'];
        var orderInfo = {};
        for (var i = 0; i < fields.length; i++) {
          var field = fields[i];
          var value = order[field];
          if (typeof value === 'string') {
            value = value.trim();
          } else if (SysUtil.isEmpty(value)){
            value = '';
          }
          orderInfo[field] = value;
        }
        return orderInfo;
      },

      setOrderList: function () {
        var order = this.order;
        this.loading = true;
        var self = this;
        ajaxRequest('putOutNew/getPutoutOrder', {
          orderId: order.orderId
        }).then(function (res) {
          var orderList = res.returnData;
          for (var i = 0; i < orderList.length; i++) {
            var order = orderList[i];

            var approvalTime = order.approvalTime;
            if (approvalTime !== '') {
              approvalTime = Number(approvalTime);
            }
            order.approvalTime = approvalTime;

            var returenTime = order.returenTime;
            if (returenTime !== '') {
              returenTime = Number(returenTime);
            }
            order.returenTime = returenTime;

            var createTime = order.createTime;
            if (createTime !== '') {
              createTime = moment(createTime).valueOf();
            }
            order.createTime = createTime;

            var valuationCount = order.valuationCount;
            valuationCount = Number(valuationCount);
            order.valuationCount = valuationCount;
            var unitPrice = order.unitPrice;
            order.totalPrice = _.round(valuationCount * unitPrice, 2);

            if (order.returnValuationCount === null) {
              order.returnValuationCount = order.returnCount;
            }

            order.hasEle = order.additionalMaterialType !== '';
          }
          self.orderList = orderList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      orderRowClassName: function (props) {
        var order = props.row;
        var isFinish = order.isFinish;
        var createTime = order.createTime;
        var flowCycle = order.flowCycle;

        var timeMoment = moment(createTime).add(flowCycle, 'day');
        var now;
        if (isFinish === 2) {
          now = moment();
        } else {
          var returenTime = order.returenTime;
          if (returenTime === '') {
            return '';
          }
          now = moment(returenTime);
        }
        if (moment(timeMoment).isBefore(now, 'day')) {
          return 'out-time';
        }

        if (moment(timeMoment).isSame(now, 'day') && isFinish === 2) {
          return 'out-time';
        }
        return '';
      },

      getStatus: function (order) {
        var status = order.status;
        var statusList = ['未审核', '已审核', '退回'];
        return statusList[status];
      }
    },
    template: template
  };
}();